<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/programme.css">
    <title>解决方案概览</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html ">产品</a></li>
                    <li><a href="./programme.html" class="active">解决方案</a></li>
                    <li><a href="./customer.html">客户案列</a></li>
                    <li><a href="./consult.html">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <main>
        <div class="banner">
            <img src="./img/u765.png" alt="">
            <div>
                <p class="font_30 font_white">解决方案中心</p>
                <h3 class="font_33 font_white">紧跟互联网时代，助力行业转型升级</h3>
            </div>
        </div>
        <div class="programme_list">
            <div class="container claerFlex">
                <div class="left_list">
                    <ul>
                        <!-- <li >
                            <span class="active"></span>
                            <p class="font_24 font_lighter active">智慧公安</p>
                        </li>
                        <li >
                            <span class=""></span>
                            <p class="font_24 font_lighter">智慧交通</p>
                        </li>
                        <li >
                            <span class=""></span>
                            <p class="font_24 font_lighter">智慧医疗</p>
                        </li>
                        <li >
                            <span class=""></span>
                            <p class="font_24 font_lighter">智慧养老</p>
                        </li>
                        <li >
                            <span class=""></span>
                            <p class="font_24 font_lighter">中央厨房</p>
                        </li>
                        <li >
                            <span class=""></span>
                            <p class="font_24 font_lighter">线上教育</p>
                        </li>
                        <li >
                            <span class=""></span>
                            <p class="font_24 font_lighter">校园安防</p>
                        </li> -->
                    </ul>
                    <div class="contact_box">
                        <p class="font_white">联系我们</p>
                        <div>
                            <p class="font_14">服务热线：XXX-XXXXXXXXX</p>
                            <p class="font_14">服务邮箱：XXXXXX@XXX.com</p>
                        </div>
                    </div>
                </div>
                <div class="right_list">
                    <ul>
                        <!-- <li>
                            <div>
                                <p class="font_33">智慧公安行业解决方案1</p>
                                <p class="font_24 font_black txt_count">这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。</p>
                                <a class="font_24">了解详情</a>
                            </div>
                            <img src="./img/u227.png" alt="">
                        </li>
                        <li>
                            <div>
                                <p class="font_33">智慧公安行业解决方案2</p>
                                <p class="font_24 font_black txt_count">这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。</p>
                                <a class="font_24">了解详情</a>
                            </div>
                            <img src="./img/u227.png" alt="">
                        </li>
                        <li>
                            <div>
                                <p class="font_33">智慧公安行业解决方案3</p>
                                <p class="font_24 font_black txt_count">这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。</p>
                                <a class="font_24">了解详情</a>
                            </div>
                            <img src="./img/u227.png" alt="">
                        </li>
                        <li>
                            <div>
                                <p class="font_33">智慧公安行业解决方案4</p>
                                <p class="font_24 font_black txt_count">这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。</p>
                                <a class="font_24">了解详情</a>
                            </div>
                            <img src="./img/u227.png" alt="">
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
</body>
<script src="./js/ajax.js"></script>
<script>
   window.onload = ()=>{
    // let data = [
    //     {
    //         title:'智慧公安',
    //         msg:[
    //             {
    //                 title:'智慧公安行业解决方案1',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧公安行业解决方案2',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧公安行业解决方案3',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧公安行业解决方案4',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //         ]
    //     },
    //     {
    //         title:'智慧交通',
    //         msg:[
    //             {
    //                 title:'智慧交通行业解决方案1',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧交通行业解决方案2',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧交通行业解决方案3',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧交通行业解决方案4',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //         ]
    //     },
    //     {
    //         title:'智慧医疗',
    //         msg:[
    //             {
    //                 title:'智慧医疗行业解决方案1',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧医疗行业解决方案2',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧医疗行业解决方案3',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧医疗行业解决方案4',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //         ]
    //     },
    //     {
    //         title:'智慧养老',
    //         msg:[
    //             {
    //                 title:'智慧养老行业解决方案1',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧养老行业解决方案2',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧养老行业解决方案3',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'智慧养老行业解决方案4',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //         ]
    //     },
    //     {
    //         title:'中央厨房',
    //         msg:[
    //             {
    //                 title:'中央厨房行业解决方案1',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'中央厨房行业解决方案2',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'中央厨房行业解决方案3',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'中央厨房行业解决方案4',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //         ]
    //     },
    //     {
    //         title:'线上教育',
    //         msg:[
    //             {
    //                 title:'线上教育行业解决方案1',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'线上教育行业解决方案2',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'线上教育行业解决方案3',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'programme_dail.html'
    //             },
    //             {
    //                 title:'线上教育行业解决方案4',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //         ]
    //     },
    //     {
    //         title:'校园安防',
    //         msg:[
    //             {
    //                 title:'校园安防行业解决方案1',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'programme_dail.html'
    //             },
    //             {
    //                 title:'校园安防行业解决方案2',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'校园安防行业解决方案3',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //             {
    //                 title:'校园安防行业解决方案4',
    //                 count:'这是一段产品介绍样本：当前，随着物联网、云计算、移动互联网的发展，一个以海量信息和数据挖掘为特征的大数据时代正在到来。在新一轮信息技术快速发展及广泛应用的背景下，越来越多的物体拥有了“智慧”，我国的城市管理及公安机关的警务管理也正朝着一种新的发展理念及形态去发展——智慧城市、智慧警务发展。智慧警务，治安防控，警务研判系统已逐渐成为新一轮警务改革与发展的潮流。',
    //                 img:'./img/u227.png',
    //                 src:'./programme_dail.html'
    //             },
    //         ]
    //     }
    // ];
    let left_list = document.querySelector('.programme_list .left_list ul');
    let right_list = document.querySelector('.programme_list .right_list ul');
    get({
        type:'GET',
        url:'/v1/programme/list',
        success:function(res){
            if(res.code === 200){
                console.log(res);
                creaotr(res.data)
            }
        }
    })
    function creaotr(data){
        data.forEach((v,i)=>{
        let {title,msg}=v;
        let str='';
        if(i === 0){
            str += `
            <li >
                            <span class="active"></span>
                            <p class="font_24 font_lighter active">${title}</p>
                        </li>
            `
            creatorRightLsit(v);
        }else{
            str += `
            <li >
                            <span class=""></span>
                            <p class="font_24 font_lighter">${title}</p>
                        </li>
            `
        }
        left_list.innerHTML += str
    })
    let left_tabs = document.querySelectorAll('.programme_list .left_list ul li');
    left_tabs.forEach((v,i)=>{
        v.addEventListener('click',(e)=>{
                left_tabs.forEach(v=>{
                v.firstElementChild.classList.remove('active');
                v.lastElementChild.classList.remove('active');
            });
            v.firstElementChild.classList.add('active');
            v.lastElementChild.classList.add('active');
            creatorRightLsit(data[i])
        })
        
    })
    function creatorRightLsit(data){
        right_list.innerHTML = '';
        let str = ''
        data.msg.forEach(v=>{
            let {title,count,img,src}=v
            str+= `
                <li>
                            <div>
                                <p class="font_33">${title}</p>
                                <p class="font_24 font_black txt_count">${count}</p>
                                <a class="font_24" href='${src}'>了解详情</a>
                            </div>
                            <img src="${img}" alt="">
                        </li>
        `
        })
        right_list.innerHTML += str;

   }
    }
    let left_box = document.querySelector('.programme_list .left_list')   
   window.addEventListener('scroll',()=>{
        if(window.scrollY >=648 && window.scrollY <=1800){
            left_box.classList.add('fixe');
        }else{
            left_box.classList.remove('fixe');
        }
    })
}
</script>
</html>